//为退出登录绑定点击事件
$('.logout').on('click', function () {
    //layer.confirm()退出登录的提示 第一个参数是内容 第二个是图标 第三个是点击确认后的动作
    layer.confirm('确认退出登录吗?', {icon: 3, title:'提示'}, function(index){
      //移除本地储存中的内容
      localStorage.removeItem('token')
      // 跳转页面
      location.href='/login.html'
      // 关闭弹出层
      layer.close(index);
    });
  })


// 封装获取用户信息的函数
function initUserInfo() {
    //出现401的两种情况:1.没有发送token  2.发送的是假token
    //promise.prototype.then(成功的回调,失败的回调) 在.then函数中失败的回调可以被省略

    // 发送get请求
    axios.get('/my/userinfo'
    //////////////放到了baseAPI.js中
    //   , {
    //   //自定义请求头 提交token 才能连接接口
    //   headers: {
    //     Authorization:localStorage.getItem('token')
    //   }
    // }
    ).then(
      //成功后的回调函数
      ({ data: res }) => {
        // console.log(res)
        // console.log('成功了')
        renderUserInfo(res.data)
      },
      //失败后的回调函数
      (error) => {
        console.log('失败了')
        // console.dir(error)
        // 判断是否是401假token
        if (error.response.status === 401) {
          //移除假token
          localStorage.removeItem('token')
          //跳转到登录页面
          location.href='/login.html'
        }
      }
    )
}
//调用函数
initUserInfo()


// 封装渲染用户信息的函数
function renderUserInfo(data) {
    // 获取用户的昵称或登录名
    let name =data.nickname||data.username
    // 获取用户的name的首字母并转化为大写或第一个汉字(大小写一样)
    let textAvatar = name.charAt(0).toUpperCase()
    //渲染头部用户信息
    // 判断图片路径是否为null(空)
    if (data.user_pic) {
      $('#header-avatar').html(` 
          <img src="${data.user_pic}"class="layui-nav-img">
            个人中心
      `)
    } else {
      $('#header-avatar').html(`
        <div class="text-avatar">${textAvatar}</div>
        个人中心
      `)
    }


    // 渲染侧边栏的用户信息
    if (data.user_pic) {
      $('.user-info-box').html(`
        <img src="${data.user_pic}"class="layui-nav-img">
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
      `)
    } else {
      $('.user-info-box').html(`
        <div class="text-avatar">${textAvatar}</div>
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
      `)
    }


    //在页面元素动态生成好之后,调用 layui 提供的 element.render() 函数
    //渲染动画效果
    layui.element.render('nav','header-nav')
}



// 定义切换高亮显示的函数  文章发布界面调用
function  hl(kw) {
  // console.log(123)
  // 排他  将所有的元素都移除这个样式
  $('dd').removeClass('layui-this')
  //给想要的元素添加样式
  $(`dd:contains("${kw}")`).addClass('layui-this')
}